<template>
	<view class="">
		<NavBar title="结算记录" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: contentHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="main_item m_b_26" v-for="(item,index) in logList" :key="index">
						<view class="m_b_28 flex_both">
							<text class="f_28_0_b">
								{{item.user_name}}（{{item.user_phone}}）
							</text>
							<text class="f_22_9" style="color: #979696;">
								{{item.pay_time}}
							</text>
						</view>
						<view class="flex_both">
							<text class="f_24_0" style="color: #979696;">
								佣金：{{item.money}}
							</text>
							<!-- <text class="f_24_0" style="color: #F92D2D;">
								结算
							</text> -->
							<text class="f_24_0" style="color: #979696;">
								已结算
							</text>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&logList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		getMarketMoneyLog()
	})
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getMarketMoneyLog()
		}, 1000)
	}
	// 评价列表 取前两条
	const logList = ref([])
	const getMarketMoneyLog = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('my.getMarketMoneyLog', { page: page.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				logList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main_list {
			.main_item {
				padding: 28rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
			}
		}

	}
</style>